<template>
  <a-modal
    title="新建消息"
    :width="840"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"  
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item label="消息标题">
          <a-input v-model="title" />
        </a-form-item>
        <wang-editor :editorData="editorData" @onEditor="handleEditorData"/>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

import WangEditor from '../../../components/Editor/WangEditor.vue'

// 

export default {
  components: {
    WangEditor
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      editorData:'',
      editorContent:'',
      title:''
    }
  },
  created () {
    console.log('custom modal created')
  },
  methods: {
    handleEditorData(editorContent) {  
      this.editorContent = editorContent; // 更新富文本的值  
    },
    handleOk(){
      this.visible=false
      this.editorData={
        content:this.editorContent,
        title:this.title
      }
      const editorContent = this.editorData;  // 获取富文本的内容  
      this.$emit('editorContent', editorContent);  // 触发名为 'editorContent' 的自定义事件，并将富文本的内容作为参数传递出去 
    }  
  },
}
</script>
